<script setup lang="ts">
	import ItemWrap from "@/components/item-wrap";
	import LeftTop from "./left-top.vue";
	import LeftCenter from "./left-center.vue";
	import LeftBottom from "./left-bottom.vue";
	//import CenterMap from "./center-map.vue";
	import CenterLine from "./center-line.vue";
	import CenterBottom from "./center-bottom.vue";
	import CenterBottom2 from "./center-bottom2.vue";
	import RightTop from "./right-top.vue";
	import RightTop2 from "./right-top2.vue";
	import RightCenter from "./right-center.vue";
	import RightBottom from "./right-bottom.vue";
import { getLocalStorage } from "@/utils";
</script>

<template>

	<div class="index-box">
		<div class="contetn_left">
			<!-- <div class="pagetab">
        <div class="item">实时监测</div>
        <div class="item">统计分析</div>
      </div> -->
			<ItemWrap class="contetn_left-top contetn_lr-item" title="运营概况">
				<LeftTop />
			</ItemWrap>
			<ItemWrap class="contetn_left-center contetn_lr-item" title="设备总览">
				<LeftCenter />
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="异常预警" style="padding: 0 10px 16px 10px">
				<LeftBottom />
			</ItemWrap>
		</div>
		<div class="contetn_center">
			<div style="text-align: center;margin: 0 auto;background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);-webkit-text-fill-color: transparent;    -webkit-background-clip: text;font-weight: 900;letter-spacing: 2px;">高风险订单功率曲线图(仅展示最新1条)</div>
			<CenterLine class="contetn_center-line" title="异常功率图" />
			<!-- <CenterMap class="contetn_center_top" title="设备分布图" /> -->
			<ItemWrap class="contetn_center-bottom" title="近12月订单/收入总额" v-if="sid == '999sa'">
				<CenterBottom />
			</ItemWrap>
			<ItemWrap class="contetn_center-bottom" title="近12月订单/会员新增" v-else>
				<CenterBottom2 />
			</ItemWrap>
		</div>
		<div class="contetn_right">
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="近30日订单收入"  v-if="sid == '999sa'">
				<RightTop />
				<span style="float: right;margin-right: 50px;" @click="changeShow()">切换</span>
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="监控风险概况"  v-else>
				<RightTop2 />
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备收入排名(TOP10)" style="padding: 0 10px 16px 10px">
				<RightCenter />
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="实时消费/充值订单 ">
				<RightBottom />
			</ItemWrap>
		</div>
	</div>
</template>
<script lang="ts">
	export default {
		name: 'Login',
		data() {
			return {
				username: '',
				password: '',
				sid: 0
			}
		},
		mounted() {
			var sid = getLocalStorage('shopId');
			this.sid = sid;
			console.log(sid)
			if (!sid || sid == 0) {
				this.$router.push({
					path: '/login',
					name: 'login'
				})
			}
			this.getData();
		},
		methods: {
			getData(){
				console.log(1122233);
			},
			changeShow(){
				this.sid = 999;
			}
		}
	}
</script>

<style scoped lang="scss">
	.index-box {
		width: 100%;
		display: flex;
		min-height: calc(100% - 64px);
		justify-content: space-between;
	}

	//左边 右边 结构一样
	.contetn_left,
	.contetn_right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
		width: 540px;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.contetn_center {
		flex: 1;
		margin: 0 54px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.contetn_center-bottom {
			height: 315px;
		}
		.contetn_center-line {
			height: 315px;
		}
	}

	.contetn_lr-item {
		height: 310px;
	}
</style>